import { View, Text, ScrollView } from "@tarojs/components";
import { useState } from "react";
import "./index.scss";
import Taro,{ useDidShow } from "@tarojs/taro";
import { AtIcon, AtCard } from "taro-ui";
import Card from "../../components/Card";
import { request } from "../../utils/request";
export default function Index() {
  // console.log('Taro.getCurrentInstance()')
  const router = Taro.getCurrentInstance().router as any;
  // console.log("router", router);
  const custPhone = router.params.custPhone;
  // const memberId = '';
  const [selectedMemberPhone, setSelectedMemberPhone] = useState(
    custPhone ? String(custPhone) : ""
  ); // 默认选中第一个成员
  const [getMorePointsModalVisible, setGetMorePointsModalVisible] =
    useState(false);
  const [
    recommendedMerchantsModalVisible,
    setRecommendedMerchantsModalVisible,
  ] = useState(false);
  const [familyMembers, setFamilyMembers] = useState<any[]>([])


  
  const currentMember = familyMembers.find(
    (member) => {
      // console.log('find member id:',member)
      return member.custPhone === selectedMemberPhone
      
    }
  );

  function getFamilyGroupPoints(){
    request({
      url:'/api/points/family/getFamilyReceiveRecord',
      success:(data)=>{
        console.log('活动保障',data)
        let familyMemebers = data.familyReceiveRecordDetails
        
        setFamilyMembers(familyMemebers)
        setSelectedMemberPhone(familyMemebers[0].custPhone)
      }
    })
  }
  

  // 处理成员选择事件
  const handleMemberSelect = (custPhone: string) => {
    // 设置选中的成员ID
    setSelectedMemberPhone(custPhone);
  };

  function jumpBindPage(){
    Taro.navigateTo({
      url: '/pages/bindAccount/index'
    })
  }
  useDidShow(()=>{
    getFamilyGroupPoints()
  })
  return (
    <View className="content">
      <ScrollView scrollY>
        <ScrollView
          scrollX
          enableFlex
          style={{ display: "flex" }}
          showScrollbar={false}
          className='scroll-view-x'
        >
          <View className="memeber-list">
            {familyMembers.map((member) => {
              return (
                <View
                  className={[
                    "member-item",
                    selectedMemberPhone === member.custPhone ? "selected" : "",
                  ].join(" ")}
                  key={member.custPhone}
                  onClick={() => {
                    handleMemberSelect(member.custPhone);
                  }}
                >
                  <Text
                    className={[
                      "memeber-phone",
                      selectedMemberPhone === member.custPhone ? "selected" : "",
                    ].join("")}
                  >
                    {member.custPhone}
                  </Text>
                </View>
              );
            })}
          </View>
        </ScrollView>
        <View className="point">
          <View className="point-title">可用积分</View>
          {/* <View className="point-use-detail">使用明细</View> */}
          <View
            className="point-num
          "
          >
            {currentMember && currentMember.totalPoints}
          </View>
        </View>
        {/* <View className="band" onClick={jumpBindPage}>
          <View
            className="band-info"
            style={{ flexDirection: "row", alignItems: "center" }}
          >
            <AtIcon
              className="at-icon"
              value="add-circle"
              size="12"
              color="#FFF"
            ></AtIcon>
            <Text>新发现</Text>
            <Text className="num"> 10 </Text>
            <Text>家商户可绑定, 立即绑定！</Text>
          </View>
        </View> */}
        {/* <View className="band band2" onClick={jumpBindPage}>
          <View
            className="band-info"
            style={{ flexDirection: "row", alignItems: "center" }}
          >
            <AtIcon
              className="at-icon"
              value="heart"
              size="12"
              color="#FFF"
            ></AtIcon>
            <Text>新发现</Text>
            <Text className="num"> 10 </Text>
            <Text>家商户可绑定, 立即绑定！</Text>
          </View>
        </View> */}
        {/* 已绑定商户列表 */}
        {/* <Card class="card">
          <View className="band-guide">
            <Text className="h3">已绑定商户</Text>
            <Text className="small" style="margin-left:4px">
              共{currentMember?.merchants.length || 0}家
            </Text>
          </View>

          <View className="band-list header">
            <Text className="col0 smallBold">商户名称</Text>
            <Text className="col1">兑换比例</Text>
            <Text className="col2">当前积分</Text>
            <Text className="col3">操作</Text>
          </View>
          {currentMember?.merchants.map((merchant, index) => (
            <View key={index} className="band-list">
              <Text className="col0 smallBold">{merchant.name}</Text>
              <Text className="col1">{merchant.ratio}</Text>
              <Text className="col2">{merchant.currentPoints}</Text>
              <Text className="col3">解绑</Text>
            </View>
          ))}
          {currentMember?.merchants.length === 0 && (
            <Text className="small">暂无绑定商户</Text>
          )}
        </Card> */}
        {/* <View className="risk">
          <Text className="smallBold">做任务，可获得</Text>
          <Text className="golden"> {currentMember?.taskPoints || 0} </Text>
          <Text className="smallBold">分, 立即去完成！</Text>
        </View> */}
        <Card class="card card2">
          <View className="band-guide">
            <Text className="h3">积分记录</Text>
            <Text className="small" style="margin-left:10px">
              共{currentMember && currentMember.familyReceiveRecordList.length || 0}次
            </Text>
          </View>

          <View className="band-list2 header">
            <Text className="col0 smallBold">活动名称</Text>
            <Text className="col1">积分奖励</Text>
            {/* <Text className="col2">当前积分</Text> */}
            {/* <Text className="col3">操作</Text> */}
          </View>
          {currentMember && currentMember.familyReceiveRecordList.map((merchant, index) => (
            <View key={index} className="band-list2">
              <Text className="col0 smallBold">{merchant.description}</Text>
              <Text className="col1">{merchant.pointsChange}</Text>
              
            </View>
          ))}
          {currentMember && currentMember.familyReceiveRecordList.length === 0 && (
            <Text className="small">暂无记录</Text>
          )}
        </Card>
      </ScrollView>
    </View>
  );
}
